html, body {
    width: 100%;
    height: 100%;
    font-family: "Microsoft Yahei";
}

body *{
    transition: all 0.4s;
}

#title {
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 20px;
    padding: 10px;
}

.target-form {
    width: auto;
    border-left: 1px solid black;
    border-top: 1px solid black;
    margin: 30px auto;
}

.target-form tr, .target-form td , .target-form th {
    width: 70px;
    height: 25px;
    margin: 0;
    padding: 5px 10px;
    border-right:1px solid black;
    border-bottom:1px solid black;
}

.target-form td {
    text-align: center;
}

.target-form th {
    background: grey;
    color: white;
}

.target-form th:hover{
    font-weight: bold;
    background: red;
    cursor: pointer;
}

.locked-form {
    width: auto;
    border-left: 1px solid black;
    border-top: 1px solid black;
    margin: 0 auto;
    top: 0;
}

.locked-form tr, .locked-form td , .locked-form th {
    width: 70px;
    height: 25px;
    margin: 0;
    padding: 5px 10px;
    border-right:1px solid black;
    border-bottom:1px solid black;
}

.locked-form td {
    text-align: center;
}

.locked-form th {
    background: grey;
    color: white;
}

.locked-form th:hover{
    font-weight: bold;
    background: red;
    cursor: pointer;
}